<template>
    <div id="renovateDilapidated" :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}">
      <div v-if="isShow" style="height: 100vh;overflow-y: auto">
        <div>
          <form action="/">
            <van-search
              style="
           width: calc(100% - 4px);
           background: #EEE;
           border-radius: 10px;
           height:40px;
           font-size: 14px;
           float: left"
              v-model="SearchData"
              placeholder="请输入信息"
              @search="onSearch"
            />
          </form>
        </div>
        <div>
          <van-list  >
            <van-cell v-for="(item, index) in contentData" @click="contentClick(item)" :key="index">
              <ul>
                <li>
                  <p style="font-weight: bold; margin-bottom: 8px; height: 3vh">
                    <span style>{{ item.HOUSEAPPLICANT }}</span>
                    <span style="float: right">
                      <van-button size="mini" type="info">鉴定报告</van-button>
                      <van-button size="mini" type="info">解危通知书</van-button>
                    </span>
                  </p>
                  <p style="font-size: 14px; color: #848484">
                    <span style="float: left">房屋编号：{{ item.FAMILYHOUSEID || '暂无数据' }}</span>
                    <span style="float: left;margin-left: 15px;">安全等级：{{ item.FAMILYHOUSEID || '暂无数据' }}</span>
                    <span style="float: right">申请时间{{ item.APPLYTIME }}</span>

                  </p>
                  <p style="clear: both; display: flex; align-items: center">
                    <img
                      style="margin-right: 4px"
                      width="10"
                      src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/dingwei.png"
                    />
                    <span @click="gotoMap(item)" style="font-size: 14px; color: blue">
                  {{ item.PERMANENTADDR || '暂无数据' }}
                </span>
                  </p>
                </li>
              </ul>
            </van-cell>
          </van-list>
        </div>
      </div>
      <div v-if="!isShow">
        <p style="width: 100%;text-align: center;font-weight: bold;margin-bottom: 10px;">治理信息表</p>
        <van-field readonly clickable name="picker" v-model="formData.ZLFS" label="治理方式" placeholder="请选择"
                                @click="showPicker = true" />
        <van-popup v-model="showPicker" position="bottom" get-container="#popup">
          <van-picker value-key="DICNAME" show-toolbar :columns="columns" @confirm="onConfirm"
                      @cancel="showPicker = false" />
        </van-popup>
        <van-field v-model="formData.BLR" label="办理人" placeholder="请填写办理人" />
        <van-field readonly clickable name="datetimePicker" v-model="formData.BLSJ" label="办理时间"
                   placeholder="请选择办理时间" />
        <van-popup v-model="showPickerq" position="bottom">
          <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" @cancel="showPickerq = false"
                               @confirm="onConfirmRQ" />
        </van-popup>
        <div class="footer">
          <van-button style="width: 95%;" :style="{fontSize:showEdition?'14px':'20px'}"  type="info" @click="save()">提交</van-button>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: "renovateDilapidated",
    data() {
      return{
        SearchData:'',
        showEdition: false,
        loading: false,
        finished: false,
        contentData:[
          {
            HOUSEAPPLICANT:'111'
          },
        ],
        isShow:true,
        showPicker:false,
        columns:[],
        formData:{
          ZLFS:'',
          BLR:'',
          BLSJ:""
        },
        showPickerq:false,
        currentDate: new Date(),
      }
    },
    methods:{
      onSearch(){

      },
      contentClick(item){
        // alert(1)
        this.isShow = false
      },
      onConfirm(data) {

      },
      onConfirmRQ(){

      }
    },
    mounted() {
      this.showEdition = this.$store.state.Edition
    }
  };
</script>

<style scoped lang="scss">
#renovateDilapidated{
  padding: 10px;
  text-align: center;
  .footer{
    width: 95%;
    position: fixed;
    bottom: 10px;
  }
}
</style>
